<template>
	<div class="box" style="width: 100%;height: 100%;float: left;margin: 10px 0;">
		<div class="but1">
			<router-link to="/home">
				<el-button type="warning" size="small" class="add btn" style='margin-right: 10px;' icon="el-icon-menu">首页</el-button>
			</router-link>
		</div>
		<div class="czlx">
			<span style="float: left;">操作类型：</span>
			<el-checkbox v-model="qx" style="float: left;margin-right: 5px;" @change="checkall2()">全选</el-checkbox>

			<el-checkbox @change="search()" v-model="zxxs">在校学生</el-checkbox>
			<el-checkbox @change="search()" v-model="xzxs">新增学生</el-checkbox>
			<el-checkbox @change="search()" v-model="lsxs">流失学生</el-checkbox>
		</div>
		<div class="ss">
			<div class="search-item">
				<el-date-picker v-model="vbtime" type="date" class="code-search" placeholder="选择开始日期" @keyup.enter.native="search"> </el-date-picker>
				<span>--</span>
				<el-date-picker v-model="vetime" type="date" class="code-search" placeholder="选择结束日期" @keyup.enter.native="search"> </el-date-picker>
				<el-button type="primary" class="add btn" style='border-radius:13px ;' @click="search()" icon="el-icon-search"></el-button>
			</div>

		</div>
		<div class="d1" style="margin-left: 0;width: 100%;height: 500px;">
			<el-card class="box-card" style='border-top: 3px solid deepskyblue;'>
				<div slot="header" class="clearfix">
					<i class="el-icon-time"></i>
					<span>学生动态统计（每月）<i class="el-icon-refresh" @click="searchauto()"></i></span>
					<!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
				</div>
				<div id="main1" style="width: 100%;height: 400px;margin: 0 auto;"></div>
			</el-card>

		</div>
	</div>
</template>
<script type="text/javascript">
	//	import Homeysbjlist from '../../view/admin/yushebjManage/add'
	import echarts from 'echarts'
	import qs from 'qs'
	export default {
		//		components: { Homeysbjlist },
		data() {
			return {
				qx: '',
				zxxs: '',
				xzxs: '',
				lsxs: '',
				vbtime: '',
				vetime: '',
				lstrq: [],
				listdata1: []
			}
		},
		created() {
			this.$store.dispatch('changeTitle', '学生动态统计图'); //修改title
			this.$store.dispatch('changeRouterIndex', '/educa/xstj'); //修改路由
			this.isLoading = true; //动画开始 
			this.searchauto();
		},
		methods: {
			getFormatDate(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
			getFormatDate2(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = month + seperator1 + strDate;
				return currentdate;
			},
			searchauto() {

			},
			search() {
				var lx5 = '',
					lx6 = '',
					lx7 = '';
				this.data1 = [];
				if(this.zxxs) {
					lx5 = 'zxxs';
					this.data1.push('在校学生')
				};
				if(this.xzxs) {
					lx6 = 'xzxs';
					this.data1.push('课消金额')
				};
				if(this.lsxs) {
					lx7 = 'lsxs';
					this.data1.push('流失学生')
				};
				var btime = new Date();
				var etime = new Date();

				if(this.vbtime && this.vetime) {
					btime = this.vbtime;
					etime = this.vetime;
					this.lstrq = [];
					var tempa = this.getFormatDate2( etime); 
					for(var i = 0; i < 1000; i++) {
						var tempdata = this.addDate( btime, i)
						var tempb = tempdata;
						if(tempa < tempb) {
							break;
						} else {
							this.lstrq.push(tempb);
						} 
					}
				} else {
					//默认10天数据
					this.lstrq = [];
					etime.setDate(btime.getDate() - 10);
					for(var i = -10; i <= 0; i++) {
						var str = this.addDate(btime, i)
						this.lstrq.push(str);
					}
				}


				//查询搜索触发事件 
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params3 = qs.stringify({
					btime: this.getFormatDate(btime),
					etime: this.getFormatDate(etime)  ,
					lx1: '',
					lx2: '',
					lx3: '',
					lx4: '',
					lx5: lx5,
					lx6: lx6,
					lx7: lx7,
					yhid: logininfo.id,
					xxid: logininfo.xxid
				});
				this.axios.post(this.$store.state.api + 'tj/listtj', params3)
					.then(res => {
						let data = res.data;
						this.listdata1 = data.data;
						this.searchLoading = false;
//						console.log(this.listdata1, 'aaaaaaaaaaa')

						this.$nextTick(function() {
							this.drawPie2('main1')
						});
						this.drawPie2()
					}).catch(res => {
						this.searchLoading = false;
					})
			},
			addDate(date, days) {
				var d = new Date(date);
				d.setDate(d.getDate() + days);
				return this.getFormatDate2(d);
			},
			drawPie2(id, lststr) {

				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption({
					title: {
						text: '学生动态统计图'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: this.data1
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.lstrq
					},
					yAxis: {
						type: 'value'
					},
					series: this.listdata1
					//			    [{
					//          name:'课消次数',
					//          type:'line',
					//          stack: '总量',
					//          data:[120, 132, 101, 134, 90, 230, 210]
					//      },
					//      {
					//          name:'课消金额',
					//          type:'line',
					//          stack: '总量',
					//          data:[220, 182, 191, 234, 290, 330, 310]
					//      } ]
					//this.listdata
				})
			},
			checkSelect(selection, row) { //点击单选select触发事件
				let strID = [];
				selection.forEach(function(v, i) {
					strID.push(v.id)
				})
				this.multipleDelNum = strID.join(",");
			},
			checkall2() { //点击全选select触发事件
				this.zxxs = this.qx; // 进货
				this.xzxs = this.qx; // 退货
				this.lsxs = this.qx;
				this.search();
			},
			checkall(selection) { //点击全选select触发事件
				let strID = [];
				selection.forEach(function(v, i) {
					strID.push(v.id)
				})
				this.multipleDelNum = strID.join(",");
			},
			componentsShow(type, data) { //显示组件
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						if(this.portComponents[i].data.type == 'single') {
							this.portComponents[i].data.index = data.row.id
						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;
						} else {
							return;
						}
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(!setting.cancel) {
							this.search();
						}
						return;
					}
				}
			}

		}
	}
</script>
<style lang="less" scoped>
	.text {
		font-size: 14px;
	}
	
	.but1 {
		width: 100%;
		float: left;
	}
	
	.czlx {
		width: 100%;
		float: left;
		margin-top: 10px;
	}
	
	.ss {
		width: 100%;
		float: left;
	}
	
	.item {
		margin-bottom: 18px;
	}
	
	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	
	.clearfix:after {
		clear: both
	}
	
	.box-card {
		width: 100%;
		height: 100%;
	}
	
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		/*    line-height: 280px;*/
		margin: 0;
		text-align: center;
	}
	
	.el-carousel__item:nth-child(2n) {
		background-color: white;
	}
	
	.el-carousel__item:nth-child(2n+1) {
		background-color: lightyellow;
	}
	
	.code-search {
		height: 30px;
		margin: 10px 0 10px 0;
		min-width: 100px;
		max-width: 120px;
	}
	
	.class-page {
		margin-top: 5px;
	}
</style>